<!-- 语音/视频通话中 -->
<template>
  <!-- 基础版 -->
  <div v-if="false">
    <h2>通话情景: {{ getModel === 0 ? "多人" : "点对点" }}</h2>
    <h3>通话类型: {{ getpattern }}</h3>

    <!-- 通话占位 -->
    <div>
      <!-- p2p通话样式 -->
      <div v-if="getModel === 1">
        <!-- 小窗口(默认远端用户) -->
        <ul>
          <!-- 本地用户 -->
          <li
            v-show="getCurrentLargeScreen.userId !== getLocalUserInfo.userId"
            class="small_windows"
            @click="screenSwitch(getLocalUserInfo.userId)"
          >
            <div
              :id="'view_windows_small' + getLocalUserInfo.userId"
              class="small_windows_view"
            ></div>
            <div class="windows_user">
              本地用户{{ getLocalUserInfo.userId }}
            </div>
          </li>
          <!-- 远端用户 -->
          <li
            v-show="getCurrentLargeScreen.userId !== getp2pRemoteInfo.userId"
            class="small_windows"
            @click="screenSwitch(getp2pRemoteInfo.userId)"
          >
            <div
              :id="'view_windows_small' + getp2pRemoteInfo.userId"
              class="small_windows_view"
            ></div>
            <div class="windows_user">{{ getp2pRemoteInfo.userId }}</div>
          </li>
        </ul>

        <!-- 大窗口(默认本地用户)-->
        <div class="large_windows">
          <div id="view_windows_large" class="large_windows_view"></div>
          <!-- 用户信息 -->
          <div class="windows_user">
            用户信息 {{ getCurrentLargeScreen.userId }}
          </div>
        </div>
      </div>
      <!-- 多人通话样式 -->
      <div v-else>
        <!-- 小窗口列表(远端用户) -->
        <ul>
          <li
            v-for="remote in getMulyiRemoteWindowsList"
            :key="remote.userId"
            v-show="remote.userId !== getCurrentLargeScreen.userId"
            class="small_windows"
          >
            <div
              :id="'view_windows_small' + remote.userId"
              class="small_windows_view"
            ></div>
            <div class="windows_user">用户</div>
          </li>
        </ul>
        <!-- 大窗口(默认本地用户)-->
        <div class="large_windows">
          <div id="view_windows_large" class="large_windows_view"></div>
          <!-- 用户信息 -->
          <div class="windows_user">用户信息</div>
        </div>
      </div>
    </div>

    <!-- 相关操作 -->
    <div>
      <!-- 通话计时器 -->
      <p class="text-center mb-5 text-white text-lg font-extrabold">
        {{ getCallTime }}
      </p>
      <div style="display: flex; justify-content: center">
        <!-- p2p视频通话可切换语音 -->
        <div
          v-if="getpattern === 'video' && getModel === 1"
          @click="operationFn('转换')"
        >
          <img
            src="@/assets/img/arcall/changaudio-hover.png"
            draggable="false"
            alt="切换为语音通话"
            title="切换为语音通话"
          />
        </div>
        <!-- 音频是否静音 -->
        <div @click="operationFn('音频')">
          <img
            v-show="!micMute"
            draggable="false"
            src="@/assets/img/arcall/voice.png"
            alt="静音"
            title="静音"
          />
          <img
            v-show="micMute"
            draggable="false"
            src="@/assets/img/arcall/voice_close.png"
            alt="静音"
            title="静音"
          />
        </div>
        <!-- 挂断 -->
        <div @click="operationFn('挂断')">
          <img
            src="@/assets/img/arcall/video_hangup.png"
            alt="挂断"
            title="挂断"
          />
        </div>
        <!-- 视频是否关闭 -->
        <div v-if="getpattern === 'video'" @click="operationFn('视频')">
          <img
            v-show="!cameraMute"
            draggable="false"
            src="@/assets/img/arcall/video.png"
            alt="视频"
            title="视频"
          />
          <img
            v-show="cameraMute"
            draggable="false"
            src="@/assets/img/arcall/video_close.png"
            alt="视频"
            title="视频"
          />
        </div>
      </div>
    </div>
  </div>

  <!-- 美化版 -->
  <div v-else class="call">
    <div class="call_conent">
      <!-- 点对点语音通话(特殊) -->
      <template v-if="getModel === 1 && getpattern === 'audio'">
        <div class="audio_bg">
          <!-- 远端用户信息 -->
          <div>
            <!-- 是否静音 -->
            <img
              v-if="!getp2pRemoteInfo.hasAudio"
              src="@/assets/img/arcall/hasAudio.png"
              style="width: 12px; height: 12px"
              alt=""
            />
            远端用户：{{ getp2pRemoteInfo.userId }}
          </div>
        </div>
      </template>
      <!-- 视频通话 -->
      <template v-else>
        <div class="video_bg">
          <!-- 小屏列表展示 -->
          <div class="video_bg_small_list">
            <div style="display: flex">
              <!-- p2p 类型 -->
              <template v-if="getModel === 1">
                <!-- 本地用户 -->
                <div
                  v-show="
                    getCurrentLargeScreen.userId !== getLocalUserInfo.userId
                  "
                  class="small_windows"
                  @click="screenSwitch(getLocalUserInfo.userId)"
                >
                  <div
                    :id="'view_windows_small' + getLocalUserInfo.userId"
                    class="small_windows_view"
                  ></div>
                  <div class="windows_user">
                    <!-- 是否静音 -->
                    <img
                      v-if="micMute"
                      src="@/assets/img/arcall/hasAudio.png"
                      style="width: 12px; height: 12px"
                      alt=""
                    />
                    <span>用户：{{ getLocalUserInfo.userId }}</span>
                  </div>
                </div>
                <!-- 远端用户 -->
                <div
                  v-show="
                    getCurrentLargeScreen.userId !== getp2pRemoteInfo.userId
                  "
                  class="small_windows"
                  @click="screenSwitch(getp2pRemoteInfo.userId)"
                >
                  <div
                    :id="'view_windows_small' + getp2pRemoteInfo.userId"
                    class="small_windows_view"
                  ></div>
                  <div class="windows_user">
                    <!-- 是否静音 -->
                    <img
                      v-if="!getp2pRemoteInfo.hasAudio"
                      src="@/assets/img/arcall/hasAudio.png"
                      style="width: 12px; height: 12px"
                      alt=""
                    />
                    <span> 用户：{{ getp2pRemoteInfo.userId }}</span>
                  </div>
                </div>
              </template>
              <!-- 多人类型 -->
              <template v-else>
                <div
                  v-for="remote in getMulyiRemoteWindowsList"
                  :key="remote.userId"
                  v-show="remote.userId !== getCurrentLargeScreen.userId"
                  class="small_windows"
                  @click="screenSwitch(remote.userId)"
                  v-loading="remote.loading"
                >
                  <div
                    :id="'view_windows_small' + remote.userId"
                    class="small_windows_view"
                  ></div>
                  <div class="windows_user">
                    <!-- 判断用户是否是本地用户 -->
                    <template v-if="remote.userId === getLocalUserInfo.userId">
                      <img
                        v-if="micMute"
                        src="@/assets/img/arcall/hasAudio.png"
                        style="width: 12px; height: 12px"
                        alt=""
                      />
                    </template>
                    <template v-else>
                      <img
                        v-if="!remote.hasAudio"
                        src="@/assets/img/arcall/hasAudio.png"
                        style="width: 12px; height: 12px"
                        alt=""
                      />
                    </template>
                    <span> 用户 {{ remote.userId }} </span>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 大屏展示 -->
          <div
            id="view_windows_large"
            class="video_bg_large_windows_view"
          ></div>
          <!-- 用户信息 -->
          <div class="windows_user">
            <img
              v-if="!getCurrentLargeScreen.hasAudio"
              src="@/assets/img/arcall/hasAudio.png"
              style="width: 12px; height: 12px"
              alt=""
            />
            用户信息 {{ getCurrentLargeScreen.userId }}
          </div>
        </div>
      </template>

      <!-- 相关操作 -->
      <div class="call_operate">
        <!-- 通话计时器 -->
        <p class="text-center mb-5 text-white text-lg font-extrabold">
          {{ getCallTime }}
        </p>
        <div style="display: flex; justify-content: center">
          <!-- p2p视频通话可切换语音 -->
          <div
            v-if="getpattern === 'video' && getModel === 1"
            @click="operationFn('转换')"
          >
            <img
              src="@/assets/img/arcall/changaudio-hover.png"
              draggable="false"
              alt="切换为语音通话"
              title="切换为语音通话"
              style="width: 50px; height: 50px"
            />
          </div>
          <!-- 音频是否静音 -->
          <div @click="operationFn('音频')">
            <img
              v-show="!micMute"
              draggable="false"
              src="@/assets/img/arcall/voice.png"
              alt="静音"
              title="静音"
            />
            <img
              v-show="micMute"
              draggable="false"
              src="@/assets/img/arcall/voice_close.png"
              alt="静音"
              title="静音"
            />
          </div>
          <!-- 挂断 -->
          <div @click="operationFn('挂断')">
            <img
              src="@/assets/img/arcall/video_hangup.png"
              alt="挂断"
              title="挂断"
            />
          </div>
          <!-- 视频是否关闭 -->
          <div v-if="getpattern === 'video'" @click="operationFn('视频')">
            <img
              v-show="!cameraMute"
              draggable="false"
              src="@/assets/img/arcall/video.png"
              alt="视频"
              title="视频"
            />
            <img
              v-show="cameraMute"
              draggable="false"
              src="@/assets/img/arcall/video_close.png"
              alt="视频"
              title="视频"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { stopView } from "@/until/arcall";
import {
  startView,
  switchToAudioCall,
  setMicMute,
  hangup,
  setCameraMute,
} from "@/until/arcall";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters([
      "getpattern",
      "getModel",
      "getLocalUserInfo",
      "getp2pRemoteInfo",
      "getMulyiRemoteWindowsList",
      "getCallTime",
      "getCurrentLargeScreen",
    ]),
  },
  data() {
    return {
      // 是否静音
      micMute: false,
      // 是否关闭视频
      cameraMute: false,
    };
  },
  created() {
    this.$store.commit("updataCurrentLargeScreen", {
      userId: this.getLocalUserInfo.userId,
      hasAudio: !this.micMute,
      hasVideo: !this.cameraMute,
    });
  },
  mounted() {
    if (this.getpattern === "video") {
      // 预览本地用户视频(默认本地用户)
      startView(
        {
          userId: this.getCurrentLargeScreen.userId,
          viewDomId: "view_windows_large",
        },
        "本地视图"
      );
    }
  },
  methods: {
    operationFn(type) {
      switch (type) {
        case "转换":
          switchToAudioCall();
          this.$store.commit("updataPattern", "audio");
          break;
        case "音频":
          this.micMute = !this.micMute;
          setMicMute(this.micMute);
          {
            // 判断当前用户是否跟大屏用户一致，一致则更新信息
            const currentLargeScreen = this.getCurrentLargeScreen;
            if (currentLargeScreen.userId === this.getLocalUserInfo.userId) {
              this.$store.commit("updataCurrentLargeScreen", {
                userId: currentLargeScreen.userId,
                hasAudio: !this.micMute,
                hasVideo: !this.cameraMute,
              });
            }
          }
          break;
        case "挂断":
          hangup();
          break;
        case "视频":
          this.cameraMute = !this.cameraMute;
          setCameraMute(this.cameraMute);
        
          {
            // 判断当前用户是否跟大屏用户一致，一致则更新信息
            const currentLargeScreen = this.getCurrentLargeScreen;
            if (currentLargeScreen.userId === this.getLocalUserInfo.userId) {
              this.$store.commit("updataCurrentLargeScreen", {
                userId: currentLargeScreen.userId,
                hasAudio: !this.micMute,
                hasVideo: !this.cameraMute,
              });
            }
          }
          break;
        default:
          break;
      }
    },

    /**
     * 小屏切大屏
     * switchId 小屏userId
     */
    screenSwitch(switchId) {
      console.log("小屏切大屏", switchId);
      const localLargeScreen = this.getCurrentLargeScreen.userId;
      // 判断小屏userId是否是本地用户
      if (switchId === this.getLocalUserInfo.userId) {
        console.log("判断小屏userId是否是本地用户");
        // 停止本地预览
        stopView();
      } else {
        // 停止小屏预览
        stopView("远端视图", switchId);
      }

      // 判断当前大屏是否是本地用户
      if (localLargeScreen === this.getLocalUserInfo.userId) {
        console.log("判断当前大屏是否是本地用户");
        // 停止本地预览
        stopView();
      } else {
        // 停止大屏预览
        stopView("远端视图", localLargeScreen);
      }

      /** 开启预览（小屏显示到大屏，大屏显示到小屏） */
      // 小屏到大屏
      if (switchId === this.getLocalUserInfo.userId) {
        startView({
          userId: switchId,
          viewDomId: "view_windows_large",
        });
      } else {
        startView(
          {
            userId: switchId,
            viewDomId: "view_windows_large",
            // 大流
            lowStream: false,
          },
          "远端视图"
        );
      }

      // 大屏到小屏
      if (localLargeScreen === this.getLocalUserInfo.userId) {
        startView({
          userId: localLargeScreen,
          viewDomId: "view_windows_small" + localLargeScreen,
        });
      } else {
        startView(
          {
            userId: localLargeScreen,
            viewDomId: "view_windows_small" + localLargeScreen,
            // 小流
            lowStream: true,
          },
          "远端视图"
        );
      }

      // 切换完成 当前大屏相关信息
      if (switchId === this.getLocalUserInfo.userId) {
        this.$store.commit("updataCurrentLargeScreen", {
          userId: switchId,
          hasAudio: !this.micMute,
          hasVideo: !this.cameraMute,
        });
      } else {
        // p2p
        if (this.getModel === 1) {
          this.$store.commit("updataCurrentLargeScreen", this.getp2pRemoteInfo);
        } else {
          const oa = this.getMulyiRemoteWindowsList.filter((item) => {
            return item.userId === switchId;
          });

          this.$store.commit("updataCurrentLargeScreen", oa[0]);
        }
      }
    },
  },
};
</script>

<style scoped>
/** 小窗口样式 */
.small_windows {
  position: relative;
  width: 240px;
  height: 180px;
  display: flex;
  background-color: rgba(35, 35, 35, 0.9);
  background-image: url("@/assets/img/arcall/logo_title.png");
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
  border: 1px solid #999999;
}
.small_windows_view {
  flex: 1;
}

/** 大窗口样式 */
.large_windows {
  width: 600px;
  height: 540px;
  position: relative;
  display: flex;
  background-color: rgba(35, 35, 35, 0.9);
  background-image: url("@/assets/img/arcall/logo_big.png");
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
}
.large_windows_view {
  flex: 1;
}

/** 窗口对应的用户信息 */
.windows_user {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 10px;
  color: #f7f7f7;
  background-color: rgba(35, 35, 35, 0.5);
}

/** 美化版 */
.call {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.call_conent {
  width: 800px;
  height: 600px;
  display: flex;
  position: relative;
}
.audio_bg {
  background-image: url("@/assets/img/arcall/audio_bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f7f7f7;
}

.video_bg {
  background-color: rgba(35, 35, 35, 0.9);
  background-image: url("@/assets/img/arcall/logo_big.png");
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f7f7f7;
  position: relative;
}
.video_bg_large_windows_view {
  width: 100%;
  height: 100%;
}
.video_bg_small_list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  overflow: auto;
  display: flex;
  z-index: 50;
}

.call_operate {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  color: #f7f7f7;
}
</style>
